<template>
  <div>
    <HeaderTitle title="基础信息"></HeaderTitle>
    <a-row style="font-size: 15px; font-width: 700">
      <a-col style="padding: 5px" :span="7" :key="item.id" v-for="item in specimenFields"> {{ item.name }} : {{ formState[item.key] }} </a-col>
    </a-row>
    <HeaderTitle style="margin-top: 10px" title="检测结果"></HeaderTitle>
    <p>{{ formState?.checkResult }}</p>
    <div>
      <span style="vertical-align: top">查看报告 : </span>
      <div style="display: inline-block">
        <p v-for="(item, index) in formState.attachments" :style="{ cursor: 'pointer', color: '#1296db' }" @click="previewImg(index, item)">{{ item.name }}</p>
        <a-image
          :width="200"
          :style="{ display: 'none' }"
          :preview="{
            visible,
            onVisibleChange: setVisible,
          }"
          :src="preview"
        />
      </div>
    </div>
    <HeaderTitle style="margin-top: 10px" title="分装信息"></HeaderTitle>
    <vxe-table max-height="350" :data="formState.childrenList">
      <vxe-column type="seq" title="序号"></vxe-column>
      <vxe-column field="createTime" title="分装时间"></vxe-column>
      <vxe-column field="specimenSerial" title="样本编号"></vxe-column>
      <vxe-column field="specimenName" title="样本名称"></vxe-column>
      <vxe-column field="capacity" title="容量" :formatter="({ row }) => `${unitCheck(row.capacity, row.unit)}`"></vxe-column>
      <vxe-column field="serial" title="数字编号"></vxe-column>
      <vxe-column field="creatorName" title="操作人"></vxe-column>
    </vxe-table>
  </div>
</template>
<script setup lang="tsx">
import HeaderTitle from '@/components/headerTitle.vue';
import { ref, onMounted } from 'vue';
import { getcustomerFormData } from '@/api/public';
import { downloadFile } from '@/api/public';
import { unitCheck } from '@/libs/utils';
const specimenFields = ref([]);
onMounted(async () => {
  let { result } = await getcustomerFormData({ groupId: props.formState.formworkId });
  specimenFields.value = result;
});
const props = defineProps({
  formState: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
// 预览图片显示
const visible = ref(false);
const preview = ref('');
const setVisible = (value): void => {
  if (visible.value != value) {
    preview.value = '';
    visible.value = value;
  }
};
const previewImg = (index, data) => {
  downloadFile(props.formState.attachments[index].id).then((res) => {
    if (data.type != 'image/png') {
      const url = window.URL.createObjectURL(
        new Blob([res], {
          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        }),
      );
      const link = document.createElement('a');
      link.style.display = 'none';
      link.href = url;
      link.setAttribute('download', data.name);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    } else {
      const bufferUrl = btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''));

      preview.value = 'data:image/png;base64,' + bufferUrl;
    }
  });
  setVisible(true);
};
</script>
<style lang="less" scoped>
div {
}
</style>
